<template>
	<div class="g-export">
		<el-button
		:type="type"
		:loading="loading"
		:link="link"
		@click="exportExcel"
		>
		{{ text }}
		</el-button>
	</div>
</template>

<script lang="ts">
/**
 * @Description: 导出excel组件
 */
import { defineComponent, toRefs, reactive, computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { omit, assign } from 'lodash-es'
import { getToken } from '@/utils/auth'
import { download } from '@/utils'
import exportKey from '@/utils/page/export'
import downKey from '@/utils/page/download'
import { DOWNLOAD_TEMPLATE } from '@/api/file'
import request from '@/http'
import { ElMessage } from 'element-plus'
export default defineComponent({
	name: 'GExport',
	props: {
		// store模块 名称
		storeModelName: {
			type: String,
			default: ''
		},
		// 类型（导出和下载模板）
		btnType: {
			type: String,
			default: 'export',
			link: true
		}
	},
	setup(props) {
		const store = useStore()
		const route = useRoute()
		const btnOptions = reactive({
			loading: false,
			type: props.btnType === 'export' ? 'default' : 'primary',
			text: props.btnType === 'export' ? '导出' : '下载导入模板',
			link: props.btnType === 'export' ? false : true
		})
		const params = computed(() => store.state[props.storeModelName].params)
		// console.log('params===', params.value);
		const exportExcel = () => {
			const title = route.meta.title as string
			let remainderParams = omit(params, ['page'])
			// console.log('remainderParams===', remainderParams)
			let postData = assign({}, { options: params.value.options }, remainderParams)
			btnOptions.loading = true
			type: props.btnType === 'export' ? 'default' : 'primary'
			text: props.btnType === 'export' ? '导出' : '下载导入模板'
			link: props.btnType === 'export' ? false : true
			let apiUrl = ''
			if (props.btnType === 'export') {
				apiUrl = exportKey[route.path]
			} else {
				//下载模板使用通用链接
				// key = downKey[route.path]
				apiUrl = downKey['common-key']
				const importTemplateCode = computed(
					() => store.state[props.storeModelName].importTemplateCode
				)
				if (!apiUrl || !importTemplateCode.value) {
					ElMessage.error('配置项存在错误，请检查！')
				} else {
					apiUrl = DOWNLOAD_TEMPLATE
					postData = { code: importTemplateCode.value }
				}
			}
			request({
				method: 'POST',
				url: apiUrl,
				data: postData,
				responseType: 'blob'
			})
				.then((res: any) => {
					const { headers, data } = res
					// console.log('res---', res);
					// console.log('-----', headers['content-disposition']);
					if (headers['content-disposition']) {
						let downLoadMark = headers['content-disposition'].split(';')
						// console.log('---downLoadMark--', downLoadMark);
						if (downLoadMark[0] === 'attachment') {
							let fileName = downLoadMark[1].split('filename=')[1]
							// fileName = decodeURIComponent(filename);//对filename进行转码
							// console.log('---fileName--', decodeURI(fileName));
							btnOptions.loading = false
							let blob = new Blob([data], {
								type: 'application/octet-stream;charset=utf-8'
							})
							let url = URL.createObjectURL(blob)
							download(url, fileName)
							URL.revokeObjectURL(url)
						}
					}
				})
				.catch(() => {
					btnOptions.loading = false
				})
		}
		return {
			...toRefs(btnOptions),
			exportExcel
		}
	}
})
</script>
<style lang="scss" scoped>
.g-export {
  margin-left: 20px;
}
</style>
